<template>
  <div class="login-container">
    <div class="login-content">
      <Tabs v-model:active="active" color="#1989fa">
        <tab title="手机登录" style="font-weight: 700;font-size: 16px;">
          <div class="login-form">
            <div class="login-form-item">
              <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="11" y="4" width="26" height="40" rx="3" fill="none" stroke="#333" stroke-width="4" />
                <path d="M22 10L26 10" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M20 38H28" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <input v-model="form.username" type="text" name="phone" autocomplete="off" placeholder="请输入手机号" />
            </div>
            <div class="login-form-item">
              <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="48" height="48" fill="white" fill-opacity="0.01" />
                <rect x="6" y="22" width="36" height="22" rx="2" fill="none" stroke="#333" stroke-width="4"
                  stroke-linejoin="round" />
                <path d="M14 22V14C14 8.47715 18.4772 4 24 4C29.5228 4 34 8.47715 34 14V22" stroke="#333"
                  stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M24 30V36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <input v-model="form.password" type="password" name="password" autocomplete="off" placeholder="请输入密码" />
            </div>
          </div>
          <!-- <div class="login-forget">
        <span>忘记密码？</span>
      </div> -->
          <Button block type="primary" @click="onLogin" style="border-radius: 100px;">登录</Button>
          <div class="login-other">
            <Divider>其他登录方式</Divider>
            <ul>
              <li>
                <Button size="small" @click="Dialog({ message: '点击微信' })">微信</Button>
              </li>
              <li>
                <Button size="small" @click="Dialog({ message: '点击淘宝' })">淘宝</Button>
              </li>
            </ul>
          </div>
        </tab>
        <tab title="快捷登录">
          <div style="display: flex; justify-content: center; align-items: center; height: 300px;">
            <Image width="200" height="200" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
          </div>
        </tab>
      </Tabs>

    </div>
  </div>
</template>

<script setup name="Login">
import { reactive } from "vue";
import { Button, Divider, Dialog, Tab, Tabs, Image } from "vant";
import { useUserStore } from "@/stores/user";
import { useRouter } from "vue-router";

const router = useRouter();
const userStore = useUserStore();

const form = reactive({
  username: "",
  password: "",
});

const active = reactive(0);

function onLogin() {

  userStore.Login(form).then((response) => {
    router.push({ path: '/' })
  }).catch((err) => {
    Dialog.alert({ message: err });
  })

}
</script>
